@import '../../var';
@import '../../common.scss';
.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18rpx 30rpx 18rpx 36rpx;
    background-color: #ffffff;
    .left {
        display: flex;
        align-items: center;
        color: $info-color;
        font-size: 24rpx;
        .num {
            margin-right: 20rpx;
        }
        .address {
            max-width: 400rpx;
        }
        .noaddress {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 175rpx;
            height: 44rpx;
            font-size: 22rpx;
            border: 1rpx solid rgba(204, 204, 204, 1);
            border-radius: 22rpx;
        }
    }
}

.section {
    padding-bottom: 100rpx;
}

.bg-light {
    background-color: #fff;
}

.bg-gray {
    background-color: #f5f5f5;
}

.list {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 20rpx;
    padding: 30rpx 30rpx 30rpx 10rpx;
    background-color: #ffffff;
    .shopper {
        align-items: center;
        display: flex;
        .leftBox {
            display: flex;
            align-items: center;
            padding: 20rpx;
            padding-right: 34rpx;
            image {
                width: 32rpx;
                height: 32rpx;
            }
        }
        .name {
            padding: 4rpx 16rpx;
            color: $title-color;
            font-size: 24rpx;
        }
    }
    .order {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .product {
            display: flex;
            margin-top: 28rpx;
            width: 100%;
            .cover {
                width: 112rpx;
                height: 112rpx;
                margin-right: 20rpx;
                border-radius: 8rpx;
            }
            .content {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex: 1;
                overflow: auto;
                .name {
                    color: $title-color;
                    font-size: 24rpx;
                }
                .cantBuyName {
                    color: $info-color;
                }
                .type {
                    color: $info-color;
                    font-size: 20rpx;
                    margin-top: -16rpx;
                    text {
                        margin-right: 10rpx;
                    }
                    &-disable {
                        color: #f8b603;
                    }
                }
                .bottoms {
                    width: 100%;
                    .rightBox {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-left: auto;
                        .disable {
                            opacity: 0.5;
                        }
                        .priceBox {
                            display: flex;
                            align-items: center;
                            .price {
                                margin-right: 20rpx;
                                color: $price-color;
                                opacity: 1;
                                font-weight: 600;
                                font-size: 26rpx;
                                text {
                                    color: $info-color;
                                }
                            }
                            .cantBuyPrice {
                                opacity: 0.6;
                            }
                            .oldPrice {
                                margin-top: 4rpx;
                                color: #b2b2b2;
                                font-size: 20rpx;
                                text-decoration: line-through;
                            }
                        }
                        .count {
                            display: flex;
                            align-items: center;
                            color: $info-color;
                            font-size: 24rpx;
                            image {
                                width: 30rpx;
                                height: 30rpx;
                            }
                            text {
                                width: 42rpx;
                                text-align: center;
                            }
                        }
                        .deleted {
                            color: #f4504d;
                            font-size: 20rpx;
                        }
                    }
                }
            }
        }
        .leftBox {
            display: flex;
            align-items: center;
            padding: 20rpx;
            padding-right: 34rpx;
            image {
                width: 32rpx;
                height: 32rpx;
            }
        }
    }
}

.bottom {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100rpx;
    margin-bottom: 0;
    padding: 18rpx 30rpx 18rpx 36rpx;
    background-color: #ffffff;
    .all {
        display: flex;
        align-items: center;
        color: $title-color;
        font-size: 28rpx;
        image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 16rpx;
        }
    }
    .besure {
        display: flex;
        align-items: center;
        .prices {
            color: $info-color;
            font-size: 20rpx;
            &-item {
                color: $title-color;
                font-weight: 600;
                font-size: 28rpx;
            }
        }
        &-button {
            width: 180rpx;
            height: 70rpx;
            margin-left: 20rpx;
            color: #ffffff;
            font-weight: 600;
            font-size: 28rpx;
            line-height: 70rpx;
            text-align: center;
            background: linear-gradient(270deg, rgba(252, 42, 64, 1) 0%, rgba(252, 122, 45, 1) 100%);
            border-radius: 35rpx;
        }
    }
    .delete {
        width: 160rpx;
        height: 64rpx;
        color: #666;
        font-weight: 600;
        font-size: 28rpx;
        line-height: 64rpx;
        text-align: center;
        border: 2rpx solid rgba(89, 182, 215, 1);
        border-radius: 35rpx;
    }
}

.nolist {
    width: 100%;
    image {
        display: block;
        width: 270rpx;
        height: 300rpx;
        margin: 300rpx auto;
    }
}

.push {
    background-color: #fff;
    .push-title {
        padding-top: 30rpx;
        padding-bottom: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        &-line {
            width: 120rpx;
            height: 2rpx;
            background: linear-gradient(90deg, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 1) 100%);
            &:nth-last-child(1) {
                background: linear-gradient(270deg, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 1) 100%);
            }
        }
        &-title {
            display: flex;
            align-items: center;
            margin: 0 22rpx;
            color: #1a1a1a;
            font-size: 30rpx;
            image {
                width: 28rpx;
                height: 27rpx;
                margin-right: 12rpx;
            }
        }
    }
}

.container {
    &.commodities {
        margin-top: 15rpx;
        padding: 0rpx 30rpx 0 30rpx;
        .productList {
            display: inline-block;
            width: 330rpx;
            margin-bottom: 20rpx;
            overflow: hidden;
            background: rgba(255, 255, 255, 1);
            border-radius: 20rpx;
            &.border {
                height: 524rpx;
                border: 1rpx solid $border-color;
            }
        }
        .productList:nth-child(2n) {
            margin-left: 28rpx;
        }
    }
}